<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>18.5 v-model 指令以及修饰符</title>

	<style>
		input[type="text"] {
			height: 30px;
			width: 300px;
			margin-bottom: 10px;
			border-radius: 5px;
			padding: 2px;
			font-size: 16px;

		}

		button {
			width: 100px;
			height: 40px;
		}

		input {
			height: 36px;

		}

		pre {
			background-color: beige;
			display: inline-block;
		}
	</style>

</head>

<body>


	<div id="app">


		<div>

			<!-- 
				基础v-model

				v-model 一些属性
				
				v-model.lazy  当input blur 的时候， 才进行改变值

				v-model.trim   会把input的值 trim 清除前后的空格

				v-model.number  会把input的值 转成number 类型
			
			-->
			<!-- 			
			<input type="text" name="" v-model="name" id=""> 
			-->

			<!-- <input type="text" name="" v-model.lazy="name" id=""> -->

			<!-- <input type="text" name="" v-model.trim="name" id=""> -->
			<input type="text" name="" v-model.number="price">
			<pre>{{price}}</pre>

		</div>


		<button>点我</button>



	</div>


	<script src="../lib/vue.js"></script>
	<script src="js/main.js"></script>

</body>

</html>